<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>补充</title>
  <script src="/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 值的绑定，动态绑定，用到了v-for -->
    <!-- 官方推荐我们在使用v-for的时候，最好给元素添加 :key属性，key属性主要为了高效更新虚拟DOM -->
    <!-- vue虚拟DOM -->
    <p>{{msg}}</p>

    <!-- 数组的响应 -->
    <!-- 因为vue是响应式，所以当data发生变化的时候，vue会自动检查数据变化，视图会跟着发生改变 -->
    <h2>{{names}}</h2>
    <button @click="btnClick()">button</button>
  </div>
<br>
  <script>
    let app = new Vue({
      el:"#app",
      data:{ 
        msg:'hello world',
        names:['kitty','tom','jerry','lucy']
      },
      methods: {
        btnClick(){
            //数组的响应
            //通过下标修改数组中的值在vue中不响应，不是响应式
            // 把数组中第一个名字改成“shane”
            // this.names[0] = 'Shane'

            //数组的响应
            // vue包含了一些观察数组发生改变编译方法，当调用这些方法时候，数组会发生改变，视图会发生变化
            // 1. push方法，在数组末尾添加元素，数据
            // this.names.push('lily')

            // 2. pop 方法，在数组末尾删除元素，数据
            // this.names.pop()

            // 3. shift方法，可以删除数组中第一个元素，数据
            // this.names.shift()

            // 4. unshift方法，可以在数组第一个位置增加元素
            // this.names.shift()
            // this.names.unshift('Shane') 

            // 5. splice 方法 splice(开始下标，删除个数，追加后面的元素)
            // 删除元素，插入元素，替换元素
            // this.names.splice(0,1,"Shane")

            // 6. sort()
            // this.names.sort()
            // 7.reverse()
            // this.names.reverse()

            // ...扩展符
            // let total = 0
            // // 编辑sum方法，总累加计算
            // function sum(...item){
            //     // es5 for
            //     for (let index = 0; index < item.length; index++) {
            //         total = total + item[index]
            //     }
            //     return total

            //     //es 6
            //     // for in 循环 循环拿出来的是下标
            //     for(item in items){

            //     }

            //     // for of 循环 拿出来的是元素
            //     for(item of items){//

            //     }

            // }

            // console.log(sum(1,2,5,6,7,3));
            // // sum(1,2)

            // Vue 有类方法
            // Vue 提供了set 方法，可以直接修改元素（要修改的元素，索引值，修改后值）
            Vue.set(this.names,0,"shane")
        }
      },
    })
  </script>
</body>
</html>